<template>
  <view class="layout_box">
    <HeadNav page-name="分类" :borderType="true" :showNav="true"/>
    <div class="layout_msg_box">
      <div class="exist_box">
        <span>已有分类</span>
        <div class="btn_box" hover-class='hover' @click.stop="addClassifyNameFn(0)">+ 添加分类({{userCategory.length || 0}}/20)</div>
      </div>
      <ul class="category_list_ul">
        <li class="category_list_li" v-for="(userClass,userCategoryIndex) in userCategory" :key="userCategoryIndex">
          <div class="left_box">{{userClass.name}}</div>
          <div class="right_box">
            <button class="btn_box" hover-class='hover' @click.stop="addClassifyNameFn(1,userClass,userCategoryIndex)"><img src="https://image.qqpyyds.com/mpAppImg/icon/edit1_icon.png" alt="">修改</button>
            <button class="btn_box" hover-class='hover' @click.stop="deleteClassifyFn(userClass,userCategoryIndex)"><img src="https://image.qqpyyds.com/mpAppImg/icon/delete_icon1.png" alt="">删除</button>
            <button class="btn_box" hover-class='hover' @click.stop="topCategoryFn(userClass,userCategoryIndex)"><img src="https://image.qqpyyds.com/mpAppImg/icon/zhiding3_icon.png" alt="">置顶</button>
          </div>
        </li>
      </ul>
      <div class="system_category_box" v-if="categories.length>0">
        <div class="tit_box">你可能想添加：</div>
        <ul class="system_category_ul">
          <li class="system_category_li" hover-class='hover' v-for="(category,categoryIndex) in categories" :key="categoryIndex" @click.stop="addSystemFn(category,categoryIndex)">{{category.name}}</li>
        </ul>
      </div>
    </div>
    <!-- 添加分类弹窗 -->
    <div class="fixed_box" v-if="classifyTypeShow">
      <div class="publicPopup_box">
        <div class="public_msg_box">
          <div class="public_titName_box">{{operationType==1?'编辑分类':'添加新分类'}}</div>
          <div class="public_input_box"><input class="input_box" type="text" maxlength="10" v-model.trim="classifyName" placeholder="请输入分类（最多10个字）"></div>
        </div>
        <div class="btn_list_box">
          <button class="btn_box btn_box_l" hover-class='hover' @click.stop="classifyTypeShow=false">取消</button>
          <button class="btn_box btn_box_r" hover-class='hover' v-if="operationType==0" @click.stop="addClassifyFn">确认添加</button>
          <button class="btn_box btn_box_r" hover-class='hover' v-if="operationType==1" @click.stop="editClassifyFn">编辑保存</button>
        </div>
      </div>
    </div>
    <!-- 添加分类弹窗 -->
  </view>
</template>
<script>
import HeadNav from '@/components/headNav/index.vue'
import goodsApi from "@/api/goods.js";
export default {
  components: {HeadNav},
  data() {
    return {
      categories: [],
      userCategory: [],
      classifyTypeShow: false,
      classifyName: '',
      operationType: 0,
      operationData: {},
      routeData: {}
    }
  },
  onLoad (r) {
    this.routeData = r
    this.queryUserCategoryFn()
    this.queryCategoryFn()
  },
  methods: {
    addSystemFn (data,index) {
      if (this.userCategory.length>=20) {
        return wx.showToast({
          icon: 'none',
          mask: true,
          title: '分类最多添加20个!'
        })
      }
      goodsApi.addCategory({name: data.name}).then(async (res_) => {
        if (res_.code == 200) {
          this.userCategory.push({name: data.name, id: res_.data,placedTop: 0})
          this.categories.splice(index,1)
        }
      })
    },
    addClassifyFn() {
      if (!this.classifyName) {
        return wx.showToast({
          icon: 'none',
          mask: true,
          title: '请添加分类名称!'
        })
      }
      goodsApi.addCategory({name: this.classifyName}).then(async (res_) => {
        if (res_.code == 200) {
          wx.showToast({
            icon: 'none',
            mask: true,
            title: '添加分类成功!'
          })
          this.userCategory.push({name: this.classifyName, id: res_.data,placedTop: 0})
          this.classifyTypeShow = false
        }
      })
    },
    editClassifyFn() {
      if (!this.classifyName) {
        return wx.showToast({
          icon: 'none',
          mask: true,
          title: '请添加分类名称!'
        })
      }
      goodsApi.updateCategory({name: this.classifyName,id:this.operationData.id}).then(async (res_) => {
        if (res_.code == 200) {
          wx.showToast({
            icon: 'none',
            mask: true,
            title: '修改分类成功!'
          })
          this.userCategory[this.operationData.index] = {
            ...this.userCategory[this.operationData.index],
            name: this.classifyName
          }
          this.queryCategoryFn()
          this.classifyTypeShow = false
        }
      })
    },
    topCategoryFn (data, index) {
      goodsApi.topCategory({id:data.id}).then(async (res_) => {
        if (res_.code == 200) {
          wx.showToast({
            icon: 'none',
            mask: true,
            title: '置顶成功!'
          })
          this.userCategory.splice(index,1)
          this.userCategory.unshift(data)
        }
      })
    },
    deleteClassifyFn (data, index) {
      this.operationData = {...data,index:index}
      let this_ = this
      wx.showModal({
        title: '提示',
        content: `确定删除[${this_.operationData.name}]分类吗？`,
        success (res) {
          if (res.confirm) {
            console.log('用户点击确定')
            let params = {
              id: this_.operationData.id
            }
            goodsApi.deleteCategory(params).then(async (res_) => {
              if (res_.code == 200) {
                wx.showToast({
                  icon: 'none',
                  mask: true,
                  title: '删除成功!'
                })
                this_.userCategory.splice(this_.operationData.index, 1)
                this_.queryCategoryFn()
                this_.$forceUpdate()
              }
            })
          } else if (res.cancel) {
            console.log('用户点击取消')
          }
        }
      })
    },
    addClassifyNameFn (type, data, index) {
      this.operationType = type
      if (this.userCategory.length>=20&&type==0) {
        return wx.showToast({
          icon: 'none',
          mask: true,
          title: '分类最多添加20个!'
        })
      }
      this.classifyName = ''
      if (data&&type==1) {
        this.operationData = {}
        this.operationData = {...data,index:index}
        this.classifyName = this.operationData.name
      }
      this.classifyTypeShow = true
    },
    queryUserCategoryFn () {
      goodsApi.getUserCategory().then(async (res_) => {
        if (res_.code == 200) {
          let categoryArr = res_.data
          this.userCategory = []
          this.userCategory = [...categoryArr]
        }
      })
    },
    queryCategoryFn () {
      goodsApi.getSystemCategory().then(async (res_) => {
        if (res_.code == 200) {
          let categoryArr = res_.data
          this.categories = []
          this.categories = [...categoryArr]
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.layout_box{
  background-color: #F2F3F5;
}
.layout_msg_box {
  height: calc(100vh - 60px);
  font-size: 32rpx;
  .exist_box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24rpx 32rpx;
    border-bottom: 2rpx solid #eee;
      background-color: #FFF;
    span {
      font-weight: 500;
      color: rgba(0,0,0,0.90);
      line-height: 48rpx;
    }
    .btn_box {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 238rpx;
      height: 48rpx;
      font-size: 24rpx;
      background: #fff;
      color: #e44435;
      border: 2rpx solid #e44435;
      border-radius: 4rpx;
    }
  }
  .category_list_ul {
      background-color: #FFF;
    .category_list_li {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0rpx 32rpx;
      border-bottom: 2rpx solid #eee;
      .left_box {
        color: rgba(0,0,0,0.90);
        font-size: 32rpx;
        font-weight: 400;
      }
      .right_box {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        .btn_box {
          display: flex;
          font-size: 24rpx;
          justify-content: center;
          font-weight: 400;
          align-items: center;
          color: rgba(0,0,0,0.60);
          line-height: 32rpx;
          margin-right: 66rpx;
          padding: 24rpx 0;
          &:last-child {
            margin-right: 0rpx;
          }
          img {
            width: 28rpx;
            height: 28rpx;
            margin-right: 2rpx;
          }
        }
      }
    }
  }
  .system_category_box {
    background-color: #FFF;
    padding: 20rpx 32rpx 90rpx 32rpx;
    .tit_box {
      font-size: 28rpx;
      font-weight: 400;
      color: rgba(0,0,0,0.60);
      line-height: 40px;
    }
    .system_category_ul {
      margin-top: 20rpx;
      .system_category_li {
        display: inline-block;
        margin-right: 16rpx;
        padding: 8rpx 24rpx;
        background: #f2f3f5;
        border-radius: 4rpx;
        font-size: 24rpx;
        line-height: 32rpx;
        font-weight: 400;
        color: rgba(0,0,0,0.60);
        margin-bottom: 20rpx;
        &:last-child {
          margin-right: 0rpx;
        }
      }
    }
  }
}
</style>